<template>
  <div>
    <!-- 显示欢迎信息和用户信息 -->
    <h2>欢迎 {{ user.uname }}！您的 uid 为 {{ user.uid }}</h2>
    <!-- 登出按钮 -->
    <el-button @click="logout">登出</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 配置导航守卫
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 使用 Vue Router
const router = useRouter();

// 定义用户信息
const user = ref({
  uname: '',
  uid: null,
});

// 登出方法
const logout = () => {
  // 移除本地存储的用户信息
  sessionStorage.removeItem('userInfo');
  // 显示登出成功消息
  ElMessage({
    message: '登出成功！',
    type: 'success',
  });
  // 跳转到登录页面
  router.push('/login');
};

// 组件挂载时执行的逻辑
onMounted(() => {
  // 从 sessionStorage 中获取用户信息
  const userInfo = sessionStorage.getItem('userInfo');
  if (userInfo) {
    // 将用户信息解析并存储到 user 变量中
    user.value = JSON.parse(userInfo);
  } else {
    // 如果没有用户信息，提示用户未登录并跳转到登录页面
    ElMessage({
      message: '用户未登录，请先登录！',
      type: 'warning',
    });
    router.push('/login');
  }
});
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>